<template>
    <el-form label-width="100px">
        <el-form-item label="SPU 名称">{{ spuInfo.spuName }}</el-form-item>
        <el-form-item label="SKU 名称">
            <el-input placeholder="SKU 名称"></el-input>
        </el-form-item>
        <el-form-item label="价格(元)">
            <el-input type="number"></el-input>
        </el-form-item>
        <el-form-item label="重量(千克)">
            <el-input type="number"></el-input>
        </el-form-item>
        <el-form-item label="规格描述">
            <el-input type="textarea" placeholder="规格描述" rows="4"></el-input>
        </el-form-item>

        <el-form-item label="平台属性">
            <!-- 平台属性下拉框 -->
            <el-form label-width="100px" :inline="true">
                <el-form-item label="手机系统">
                    <el-select placeholder="请选择">
                        <el-option value=""></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="手机系统">
                    <el-select placeholder="请选择">
                        <el-option value=""></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="销售属性">
            <!-- 销售属性下拉框 -->
            <el-form label-width="100px" :inline="true">
                <el-form-item label="颜色">
                    <el-select placeholder="请选择">
                        <el-option value=""></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>

        <el-form-item label="图片列表">
            <el-table border stripe>
                <el-table-column type="selection" width="55" />
                <el-table-column label="图片"></el-table-column>
                <el-table-column label="名称"></el-table-column>
                <el-table-column label="操作">
                    <template v-slot>
                        <el-button type="primary">设为默认</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>
        <el-form-item>
            <el-button type="primary">保存</el-button>
            <el-button type="default" @click="emit('setState', 0)">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "SkuFrom",
});
</script>

<script setup lang="ts">
import { requestSpuImageList, requestSpuSaleAttrList, type supInfoType } from "@/api/spu";
import { onMounted } from "vue";
import { requestgetattrList } from "@/api/attr";
import { storeToRefs } from "pinia";
import useAttrStore from "@/stores/attr";

//1.接收父组件传递的自定义事件，点击取消调用，回到spuList组件
const emit = defineEmits<{
    (event: 'setState', state: number, row?: supInfoType): void
}>()

//2.接收父组件传递的props
const props = defineProps<{
    spuInfo: supInfoType
}>()

//3.拿到pinia中的category3Id
const attrStore = useAttrStore()
const { category1Id, category2Id, category3Id } = storeToRefs(attrStore)

/* //获取所有的平台属性
requestAttrList(1id,2id,3id)==>attrListType
//根据当前的spuId获取所有销售属性列表
requestSpuSaleAttrList()===>SpuSaleAttrListType
//根据当前的spuId获取所有图片列表
requestSpuImgList(spuId)===>SpuImgListType */

//4.初始化请求所有需要的数据
const getInitData = () => {
    const promise1 = requestgetattrList(category1Id.value as number, category2Id.value as number, category3Id.value as number);
    const promise2 = requestSpuSaleAttrList(props.spuInfo.id as number);
    const promise3 = requestSpuImageList(props.spuInfo.id as number);

    const rsult = Promise.all([promise1, promise2, promise3])
}
onMounted(() => {
    getInitData()
})


</script>